在上一篇30天Flutter手滑系列 - 基本組件(Basic Widgets)，介紹了基本會用的Widgets外，接下來這篇也是一定會用到的文字與圖片Widgets，以下就分別對它們個別介紹。

文字組件(Text Widgets)

1. DefaultTextStyle

最基本的文字組件，沒有明確定義任何樣式，就想像它是純文字好了，如果需要單行樣式，需要考慮用Text。

2. Text

單一樣式的文字。如先前提到，文字的斷點位置依據容器而定。
Style這個屬性是非必需的，若沒給定的情況下，會繼承最近的外層樣式，跟CSS的樣式效果一樣。TextStyle.inherit可以決定是否有這個繼承效果。

下方範例針對超過長度限制的文字，改以...(ellipsis)顯示，並且字體的樣式設為粗體。

Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(fontWeight: FontWeight.bold),
)

3. RichText

RichText用來針對同一個段落文字內可以有不同樣式的widget。
這個widget必須明確指定一個預設樣式，可以設為DefaultTextStyle，然後針對個別文字再去給定不同的樣式。

下面範例是一段RichText，先指定整段文字為DefaultTextStyle，然後個別文字再去用TextSpan給定不同樣式。

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'beautiful', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: ' world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

圖片相關組件(Assets, images, and icon widgets)

1. AssetBundle

這是在整個App內會被使用到的資源檔案(resources)的集合，像是圖片或是文字檔。
要存取這些檔案可以透過NetworkAssetBundle 用非同步的方式載入
，或是直接存取本機端資源。
在應用程式內有個rootBundle，若被加入到rootBundle內，即放到assets這個資料夾內的檔案，會隨著整個應用程式一起被打包。
加入後記得修改pubspec.yaml檔案，例如下方範例。

name: my_awesome_application
flutter:
  assets:
   - images/hamilton.jpeg
   - images/lafayette.jpeg

相較於rootBundle，可以在個別層級使用AssetBundle，放入一些非必要隨著整個應用程式被打包的資源，這些資源只會在執行時被載入。

2. Icon

在Flutter內，Icon也是一種widget，這邊內建的圖示是基於material設計。
本身不具有互動性，如果需要互動性的效果可以參考IconButton。
在這個widget會假定引入的圖示是正方形的，非正方型圖示會可能會有錯誤產生。

下方範例示範不同的圖示，具有不同尺寸及顏色。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const <Widget>[
    Icon(
      Icons.favorite,
      color: Colors.pink,
      size: 24.0,
      semanticLabel: 'Text to announce in accessibility modes',
    ),
    Icon(
      Icons.audiotrack,
      color: Colors.green,
      size: 30.0,
    ),
    Icon(
      Icons.beach_access,
      color: Colors.blue,
      size: 36.0,
    ),
  ],
)

3. Image

用來顯示圖片的Widget，支援格式有：JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP和WBMP。

引入圖片的方法有很多種：

• new Image：從ImageProvider獲得圖片。
• new Image.asset：透過一個Key從AssetBundle獲得圖片。
• new Image.network：從URL獲得圖片。
• new Image.file：從一個File獲得圖片。
• new Image.memory：從Unit8List獲得圖片。

以下範例用的是NetworkImage，這是其中一種ImageProvider：

const Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

或是可以用本身widget帶有的方法Image.network。

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

4. RawImage

這個widget用來直接顯示dart:ui.Image，然後官方都說這很冷門了，建議直接使用Image就好，我也暫時想不到可以應用的場景。

文字輸入組件(Input Widgets)

總結

Text跟Image算是一定會用到的widgets，也被官方歸類為basic widgets，因此有些段落跟前一章節有重疊。
不過今天中秋節嘛，輕鬆讀完這篇也好。
結束今天靜態的widget後，明天開始會介紹佈局(layout)的部分，這樣才知道有什麼排列組合的方法，把各個widgets放入。

祝大家中秋節快樂 Happy Mid-autumn Festival!

參考資料

https://flutter.dev/docs/development/ui/widgets/assets
https://flutter.dev/docs/development/ui/widgets/text